<template>
	<div>
		<el-dialog width="600px" style="height: 700px;"  :before-close="cancel" :closable="false" :mask-closable="false" :visible="visible">
			<span>
				<baidu-map  class="bm-view" ak="9ZKrjIlExnWpdcKZHoK8glHOzTy3ehYB"
					:center="center" :zoom="zoom" :scroll-wheel-zoom="true" @click="getClickInfo"
					@moving="syncCenterAndZoom" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom">
					<bm-view style="width: 100%; height:400px;"></bm-view>
					<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
					<bm-marker :position="{ lng: center.lng, lat: center.lat }" :dragging="true"
						animation="BMAP_ANIMATION_BOUNCE">
					</bm-marker>
					<bm-control :offset="{ width: '10px', height: '10px' }">
						<bm-auto-complete v-model="keyword" :sugStyle="{ zIndex: 999999 }">
							<input type="text" placeholder="请输入搜索关键字" class="serachinput" />
						</bm-auto-complete>
					</bm-control>
					<bm-local-search :keyword="keyword" :auto-viewport="true"
						style="width:0px;height:0px;overflow: hidden;"></bm-local-search>
				</baidu-map>
			</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="confirm">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		BaiduMap,
		BmControl,
		BmView,
		BmAutoComplete,
		BmLocalSearch,
		BmMarker
	} from 'vue-baidu-map'
	export default {
		components: {
			BaiduMap,
			BmControl,
			BmView,
			BmAutoComplete,
			BmLocalSearch,
			BmMarker
		},
		data() {
			return {
				showMapComponent: this.value,
				keyword: '',
				mapStyle: {
					width: '100%',
					height: this.mapHeight + 'px'
				},
				center: {
					lng: 113.582484,    // 经度
					lat: 34.812407,     // 纬度
					address:''          // 具体地址
				},
				zoom: 15
			}
		},
		props: {
			visible: Boolean,
			value: {
				type: Boolean,
				default: false
			},
			mapHeight: {
				type: Number,
				default: 500
			}
		},
		created() {},
		watch: {
			// value: function (currentValue) {
			//   this.showMapComponent = currentValue
			//   if (currentValue) {
			//     this.keyword = ''
			//   }
			// }
		},
		methods: {
			/***
			 * 地图点击事件。
			 */
			getClickInfo(e) {
				this.center.lng = e.point.lng
				this.center.lat = e.point.lat
				
				const myGeo = new BMap.Geocoder() // 创建地址解析器的实例
				  myGeo.getLocation(e.point, rs => {
				    // console.log(rs.surroundingPois) // 附近的POI点(array) 
				    // console.log(rs.business) // 商圈字段
					console.log(rs)
				    let adr = rs.addressComponents;
					// 获取地图定位地址
				    let padd = adr.province + adr.city + adr.district + adr.street + adr.streetNumber // 省市区街道门牌号
				    let address = '';  
					// 判断附近是否有POI点
					if(rs.surroundingPois){
						if(rs.surroundingPois.length!=0){
							address = rs.surroundingPois[0].address;
							// 判断address地址中是否是具体提示，如果不是详细地址，则处理
							if(address.indexOf('区')==-1){
								address = padd+address;
							}
							if(!address.indexOf('市')==-1){
								address = adr.province+ adr.city+address;
							}
							if(!address.indexOf('省')==-1){
								address = adr.province+address;
							}
						}else{
							address = padd;
						}
					}else{  // 如果没有，则把padd赋值给address
						address = padd;
					}
					console.log(address)
					this.center.address = address;
					//console.log( rs.surroundingPois[0].address+rs.surroundingPois[0].title )
					
				  })
			
			},
			syncCenterAndZoom(e) {
				const {
					lng,
					lat
				} = e.target.getCenter()
				this.center.lng = lng
				this.center.lat = lat
				this.zoom = e.target.getZoom()
			},
			/***
			 * 确认
			 */
			confirm: function() {
				this.$emit('map-confirm', this.center)
			},
			/***
			 * 取消
			 */
			cancel: function() {
				this.$emit('cancel')
			}
		}
	}
</script>

<style scoped>
	.serachinput {
		width: 300px;
		box-sizing: border-box;
		padding: 9px;
		border: 1px solid #dddee1;
		line-height: 20px;
		font-size: 16px;
		height: 38px;
		color: #333;
		position: relative;
		border-radius: 4px;
		-webkit-box-shadow: #666 0px 0px 10px;
		-moz-box-shadow: #666 0px 0px 10px;
		box-shadow: #666 0px 0px 10px;
	}
</style>
